{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<div
  class="field string-list form-section"
  data-test-component="string-list"
  {{did-insert this.autoSize}}
  {{did-update this.autoSizeUpdate}}
  data-test-input
  ...attributes
>
  {{#if @label}}
    <label class="is-label" data-test-string-list-label="true">
      {{@label}}
      {{#if @helpText}}
        <InfoTooltip>{{@helpText}}</InfoTooltip>
      {{/if}}
    </label>
    {{#if @subText}}
      <p class="sub-text">
        {{@subText}}
      </p>
    {{/if}}
  {{/if}}
  {{#each this.inputList as |data index|}}
    <div class="field is-grouped" data-test-string-list-row={{index}}>
      <div class="control is-expanded">
        <Textarea
          data-test-string-list-input={{index}}
          class="input {{if (includes index this.indicesWithComma) 'has-warning-border'}}"
          @value={{data.value}}
          name={{concat this.elementId "-" index}}
          aria-label="{{@label}} list item {{index}}"
          {{on "keyup" (action "inputChanged" index)}}
          {{on "change" (action "inputChanged" index)}}
        />
      </div>
      <div class="control is-narrow">
        {{#if (eq (inc index) this.inputList.length)}}
          <Hds::Button @text="Add" data-test-string-list-button="add" {{on "click" this.addInput}} @isFullWidth={{true}} />
        {{else}}
          <Hds::Button
            @text="delete row"
            @icon="trash"
            @isIconOnly={{true}}
            @color="secondary"
            @isFullWidth={{true}}
            data-test-string-list-button="delete"
            {{on "click" (fn this.removeInput index)}}
          />
        {{/if}}
      </div>
      {{#if (includes index this.indicesWithComma)}}
        <Hds::Icon @name="alert-triangle" @color="var(--token-color-foreground-warning)" @size="24" @isInline={{true}} />
      {{/if}}
    </div>
  {{/each}}
  {{#if this.indicesWithComma}}
    <Hds::Alert @type="inline" @color="warning" as |A|>
      <A.Description>
        Input contains a comma. Please separate values into individual rows.
      </A.Description>
    </Hds::Alert>
  {{/if}}
</div>